<template>
  <n-modal
    v-model:show="state.showFlag"
    class="system-modal"
    preset="card"
    transform-origin="center"
    :style="{ width: `${width}px` }"
    :title="state.title"
    :content-style="{ paddingLeft: noPadding ? 0 : null, paddingRight: noPadding ? 0 : null }"
  >
    <n-spin :show="state.loadingFlag">
      <n-scrollbar style="max-height: 600px">
        <n-form
          ref="formRef"
          :model="modelForm"
          label-placement="left"
          label-align="right"
          :label-width="100"
          :disabled="disabled"
          :style="{ padding: noPadding ? 0 : '0 20px' }"
          require-mark-placement="left"
        >
          <slot />
        </n-form>
      </n-scrollbar>
    </n-spin>
    <template v-if="showFooter" #footer>
      <n-flex :justify="justify">
        <n-button @click="onClose">取消</n-button>
        <n-button
          color="#0A56D8FF"
          :disabled="disabled"
          :loading="state.submitFlag"
          @click="onValidate"
        >
          确定
        </n-button>
      </n-flex>
    </template>
  </n-modal>
</template>
<script setup lang="jsx">
defineOptions({ name: 'MyModal' })
const props = defineProps({
  modelForm: {
    type: Object,
    default: () => ({}),
  },
  width: {
    type: Number,
    default: 600,
  },
  justify: {
    type: String,
    default: 'center',
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  noPadding: {
    type: Boolean,
    default: false,
  },
  showFooter: {
    type: Boolean,
    default: true,
  },
})
const emits = defineEmits(['submit'])
import { useFormPro } from '@/hooks/useFormPro'
const { state, setState, formRef, onClose, onValidate } = useFormPro(props, emits)
defineExpose({
  setState,
})
</script>
<style lang="scss" scoped></style>
